/**
 * base.css
 *
 * Basic styles
 *
 * The font-size methodology adopted below is detailed by
 * Harry Roberts at http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/
 *
 * Roberts' key points are as follows:
 * Set structure in percentages. This includes content areas, sidebars etc.
 * Set type in rems with a pixel fallback for older browsers. This gives us a great amount of control with added scalability.
 * Set type-related items in ems so that paddings et al scale with the font-size.
 * Set line-heights with no units at all.
 *
 * While there will be specific exceptions we need to make for particular elements, adopting and
 * adhering to this general strategy will probably save us significant time in the future, and also
 * provides for pages that can scale.
 */

html,
body {
    font-size: 1em;
    font: 1em/1.5 sans-serif;
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 1.125rem;
}

ul,
ol,
p,
a,
div,
input,
select {
    font-size: 12px;
    font-size: 0.8rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
article,
p,
dl {
    margin: 0;
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

body,
div,
p,
li,
input,
option,
textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-smooth: auto;
}

html a,
body a,
html a:link,
body a:link,
html a:visited,
body a:visited,
ul.dropdown li,
ul.dropdown a:link,
ul.dropdown a:visited {
    color: [[setting:link_fore]];
    background-color: [[setting:link_back]];
}

html a:hover,
body a:hover,
ul.dropdown li.hover,
ul.dropdown li:hover,
ul.dropdown a:hover,
ul.dropdown a:active {
    color: [[setting:linkhover_fore]];
    background-color: [[setting:linkhover_back]];
}

html {
    color: [[setting:main_fore]];
    background: [[setting:main_back]] [[setting:background]] repeat;
}

a:link,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.pagelayout-redirect #page {
    background-image: none;
}

.pagelayout-report .no-overflow {
    overflow: auto;
}
